<template>
    <div class="head">
        <div>
            <img src="../assets/logo.png" alt="logo">
            <span>智慧校园</span>
        </div>
    </div>
    <div class="line" />
    <el-menu
            background-color="#222832"
            text-color="#fff"
            :router="true" >
        <el-menu-item v-if="isAdmin" index="/user"><i class="el-icon-user-solid" />用户管理</el-menu-item>
        <el-menu-item v-if="userType === 1" index="/Researcher"><i class="el-icon-orange" />Researcher</el-menu-item>
        <el-menu-item v-if="userType === 2" index="/ProjectManage"><i class="el-icon-s-data" />项目审批管理</el-menu-item>
      <el-submenu index="10" v-if="userType !== 1">
        <template #title>
          <span >报表管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/Export"><i class="el-icon-bank-card" />科研人员申请报表</el-menu-item>
          <el-menu-item index="/MemberExport"><i class="el-icon-s-order" />团队成员报表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>


      <el-submenu index="5" v-if="userType !==1">
        <template #title>
          <span>图形展示</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/projectDrawBar"><i class="el-icon-lock" />项目块状图</el-menu-item>
          <el-menu-item index="/projectDrawLine"><i class="el-icon-lock" />项目折线图</el-menu-item>
          <el-menu-item index="/projectDrawPie"><i class="el-icon-lock" />项目饼图</el-menu-item>
          <el-menu-item index="/projectJADrawBar"><i class="el-icon-lock" />项目申请块状图</el-menu-item>
          <el-menu-item index="/projectJADrawLine"><i class="el-icon-lock" />项目申请折线图</el-menu-item>
          <el-menu-item index="/projectJADrawPie"><i class="el-icon-lock" />项目申请饼图</el-menu-item>
          <el-menu-item index="/logDrawBar"><i class="el-icon-lock" />日志块状图</el-menu-item>
          <el-menu-item index="/logDrawLine"><i class="el-icon-lock" />日志折线图</el-menu-item>
          <el-menu-item index="/logDrawPie"><i class="el-icon-lock" />日志饼图</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
</template>

<script>
    import userService from '../utils/userService'

    export default {
        name: "Aside",
        computed:{
            showAdmin() {
                return true;
            },
            isAdmin() {
                return userService.currentUser&&userService.currentUser.type ===3;
            },
            userType(){
                if (!userService.currentUser){
                    return null ;
                }else{
                    return userService.currentUser.type;
                }
            }
        }
    }
</script>

<style scoped>
    .head {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
    }
    .head > div {
        display: flex;
        align-items: center;
    }

    .head img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .head span {
        font-size: 20px;
        color: #ffffff;
    }
    .line {
        border-top: 1px solid hsla(0,0%,100%,.05);
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
</style>
